<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监视属性02</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>


<!--
    监视属性watch：
        1.当被监视的属性变化时，回调函数自动调用，进行相关操作
        2.监视的属性必须存在，才能进行监视
        3.监视的两种写法：
            a.在new Vue时传入watch配置
            b.通过vm.$watch监视
-->

<body>
<!-- 准备好 一个容器-->
<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>

</body>



<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
    data:{
      isHot:true,
    },
    methods:{
      changeWeather(){
        this.isHot = !this.isHot
      }
    },
    computed:{
      info(){
        return  this.isHot ?'炎热':'寒冷'
      }
    },
    watch:{
      isHot:{
        immediate:true, // 初始化时让 handler调用一次
        //当isHot发生改变时，handler被调用
        handler(newValue,oldValue){
          console.log('isHot被改变为'+this.info,newValue,oldValue)
        }
      },
      // info:{
      //   immediate:true, // 初始化时让 handler调用一次
      //   //当isHot发生改变时，handler被调用
      //   handler(newValue,oldValue){
      //     console.log('isHot被改变为',newValue,oldValue)
      // }
    }
  })


  vm.$watch('isHot',{
    immediate:true, // 初始化时让 handler调用一次
    //当isHot发生改变时，handler被调用
    handler(newValue,oldValue){
      console.log('isHot被改变为'+this.info,newValue,oldValue)
  })
</script>
</html>
